import styled from 'styled-components';
import { useStorage } from "@/hooks/useStorage";
import { useHistory } from "@/hooks/useHistory";
export default function useSyncExternalStoreComp() {
    const [data,setData] = useStorage('count',1);
    const [url,push,replace] = useHistory();
  return (
    <Wrapper>
      <div className="use-syncExternalStore">
        <p>{data}</p>
        url: {url}
        <br />
        <button onClick={()=>setData(data+1)}>+1</button>
        <button onClick={()=>setData(data-1)}>-1</button>
        <button onClick={()=>push('/a')}>跳转</button>
        <button onClick={()=>replace('/c')}>替换</button>
      </div>
    </Wrapper>
  );
}
const Wrapper = styled.div`
  .use-syncExternalStore {
    color: #000;
  }
`;
